<template>
  <div class="page-container knowledge">
    <div class="box-title">
      知识库管理
    </div>
    <div class="knowledge-content f-r">
      <el-card shadow="none" class="tree-card">
        <div class="tree">
          <div class="tree-title">
            知识目录管理
          </div>
          <div class="dir-list">
            <div class="dir-item active f-r a-c">
              <el-image :src="icon.add_active" style="width: 20px;height: 20px" />
              <div class="dir-name">新增主题</div>
            </div>
          </div>
          <div class="tree-title">
            已有主题
          </div>
          <div class="dir-list">
            <div
              v-for="(item,index) in dirList"
              :key="index"
              :class="['dir-item f-r a-c', item.id === dirActive.id ? 'active' : '' ]"
              @click="checkedDir(item)"
            >
              <el-image
                :src="item.id === dirActive.id ? item.activeIcon : item.icon"
                style="width: 20px;height: 20px"
              />
              <div class="dir-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card shadow="none" class="f-g">
        <div class="box-title">知识库结构变更记录</div>
        <div class="table-box">
          <el-table
            v-loading="loading"
            :data="tableData"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"
            @selection-change="onSelect"
          >
            <el-table-column type="index" width="80px" label="序号" align="center" />
            <el-table-column
              v-for="item in columns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              align="center"
            />
          </el-table>
        </div>
        <div class="page-box">
          <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
export default {
  mixins: [crud],
  data() {
    return {
      icon: {
        add: require('@/assets/knowledge/1.png'),
        add_active: require('@/assets/knowledge/1-1.png')
      },
      dirList: [
        {
          id: 1,
          name: '故障方案',
          icon: require('@/assets/knowledge/2.png'),
          activeIcon: require('@/assets/knowledge/2-2.png')
        },
        {
          id: 2,
          name: '培训文档',
          icon: require('@/assets/knowledge/3.png'),
          activeIcon: require('@/assets/knowledge/3-3.png')
        }
      ],
      dirActive: {},
      searchParams: {
        timeValue: []
      },
      tableData: [
        {}, {}, {}
      ],
      columns: [
        { prop: '操作时间', label: '操作时间', width: '', minWidth: '' },
        { prop: '操作员', label: '操作员', width: '', minWidth: '' },
        { prop: '描述', label: '描述', width: '', minWidth: '' }
      ]
    }
  },
  methods: {
    checkedDir(item) {
      this.dirActive = item
    }
  }
}
</script>

<style lang="scss">
.knowledge {
  height: 100%;
  width: 100%;
  .knowledge-content {
    height: calc(100%);
    .tree-card {
      margin-right: 10px;
      .el-card {
        width: 232px;
      }
      .el-card__body {
        padding: 13px 0 !important;
      }
    }
  }
  .tree {
    padding: 0 12px 0 4px;
    .tree-title {
      margin-top: 21px;
      padding-left: 19px;
      height: 13px;
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ACACAC;
      margin-bottom: 14px;
    }
    .dir-list {
      .dir-item {
        padding-left: 21px;
        width: 216px;
        height: 36px;
        border-radius: 3px;
        color: #7D7D7D;
        cursor: pointer;
        &.active {
          color: #0052D9;
          background: rgba(0, 82, 217, .1);
        }
        .dir-name {
          line-height: 14px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          padding-left: 11px;
        }
      }
    }
  }
  .box-title {
    line-height: 21px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 500;
    color: #333333;
    margin-bottom: 15px;
  }
}
</style>
